<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>详情页</title>
    <link rel="stylesheet" href="../css/base.css">
    <link rel="stylesheet" href="../css/About.css">
</head>

<body>
    <section id="about">
        <header>
            <div class="content">
                <div class="header">
                    <a class="icon iconfont" href="">&#xe679;</a>
                    <ul>
                        <li><a href="###" class="active">商品</a></li>
                        <li><a href="###">详情</a></li>
                        <li><a href="###">评价</a></li>
                    </ul>
                    <a class="icon iconfont" href="">&#xe637;</a>
                </div>
                <div class="caidan">
                    <p></p>
                </div>
            </div>
        </header>
        <main>
            <section id="maincontent">
                <div class="bigimg content">
                    <img src="../img/45_06266619174795164_360.jpg" alt="">
                    <section class="btn">
                        <a href="###" class="icon iconfont black">&#xe679</a>
                        <a href="###" class="icon iconfont more">&#xe637</a>
                        <a href="###" class="icon iconfont collect">&#xe64a</a>
                        <div id="show" style="display: none;">
                            <span class="iconfont icon-jiantou_shang"></span>
                            <ul class="list">
                                <li>
                                    <span class="iconfont icon-shouye"></span>
                                    <span>首页</span>
                                </li>
                                <li>
                                    <span class="iconfont icon-sousuo"></span>
                                    <span>搜索</span>
                                </li>
                                <li>
                                    <span class="iconfont icon-leimupinleifenleileibie
                                    "></span>
                                    <span>分类</span>
                                </li>
                                <li>
                                    <span class="iconfont icon-xiaoxi"></span>
                                    <span>消息</span>
                                </li>
                                <li>
                                    <span class="iconfont icon-gouwuche"></span>
                                    <span>购物车</span>
                                </li>
                            </ul>
                        </div>
                    </section>
                </div>
                <div class="timu">
                    <div class="content">
                        <p>男士破洞春秋牛仔夹克男潮2019新款春装上衣韩版潮流褂子春季外套 浅蓝色 XL</p>
                        <p>
                            <span class="fl">￥<em>128.00</em></span>
                            <span class="fr">销量：0件</span>
                        </p>
                        <p>
                            <span>送至</span>
                            <span>全国</span>
                            <span>有货</span>
                            <span class="icon iconfont fr">&#xe697;</span>
                        </p>
                        <p>免运费</p>
                    </div>
                </div>
                <div class="yixuan">
                    <div class="content">
                        <span>已选</span>
                        <span>颜色 <em>浅蓝色</em></span>
                        <span>尺码 <em>XL</em></span>
                        <span class="icon iconfont fr">&#xe624;</span>
                    </div>
                </div>
                <!-- 分割线 -->
                <div class="fenge"></div>
                <!-- 商品评价 -->
                <div class="appraise">
                    <div class="content">
                        <span>商品评价</span>
                        <span>好评率 <em>100%</em></span>
                        <span class="icon iconfont fr">&#xe624;</span>
                        <span class="fr">（0人评价）</span>
                    </div>
                </div>
                <!-- 分割线 -->
                <div class="fenge"></div>
                <!-- 店铺 -->
                <div class="store">
                    <div class="content">
                        <p>
                            <span class="icon iconfont">&#xe70a;</span>
                            <span>潮男搭配师</span>
                            <span class="icon iconfont fr">&#xe624;</span>
                        </p>
                        <p>
                            <span>描述相符 <em>5</em></span>
                            <span>服务态度 <em>4.3</em></span>
                            <span>发货速度 <em>4.3</em></span>
                        </p>
                    </div>
                </div>
                <!-- 分割线 -->
                <div class="fenge"></div>
                <!-- 店铺推荐 -->
                <div class="recommend">
                    <div class="content">
                        <h1>店铺推荐</h1>
                        <ul>
                            <li>
                                <img src="../img/45_05923385552023978_240.jpg" alt="">
                                <p>2018早秋卫衣韩版潮流修身圆领套头衫青少年学生百搭春秋男士外套 黑色 M</p>
                                <p>￥ <em>89.00</em></p>
                            </li>
                            <li>
                                <img src="../img/45_05923385552023978_240.jpg" alt="">
                                <p>2018早秋卫衣韩版潮流修身圆领套头衫青少年学生百搭春秋男士外套 黑色 M</p>
                                <p>￥ <em>89.00</em></p>
                            </li>
                            <li>
                                <img src="../img/45_05923385552023978_240.jpg" alt="">
                                <p>2018早秋卫衣韩版潮流修身圆领套头衫青少年学生百搭春秋男士外套 黑色 M</p>
                                <p>￥ <em>89.00</em></p>
                            </li>
                            <li>
                                <img src="../img/45_05923385552023978_240.jpg" alt="">
                                <p>2018早秋卫衣韩版潮流修身圆领套头衫青少年学生百搭春秋男士外套 黑色 M</p>
                                <p>￥ <em>89.00</em></p>
                            </li>
                            <li>
                                <img src="../img/45_05923385552023978_240.jpg" alt="">
                                <p>2018早秋卫衣韩版潮流修身圆领套头衫青少年学生百搭春秋男士外套 黑色 M</p>
                                <p>￥ <em>89.00</em></p>
                            </li>
                            <li>
                                <img src="../img/45_05923385552023978_240.jpg" alt="">
                                <p>2018早秋卫衣韩版潮流修身圆领套头衫青少年学生百搭春秋男士外套 黑色 M</p>
                                <p>￥ <em>89.00</em></p>
                            </li>
                            <li>
                                <img src="../img/45_05923385552023978_240.jpg" alt="">
                                <p>2018早秋卫衣韩版潮流修身圆领套头衫青少年学生百搭春秋男士外套 黑色 M</p>
                                <p>￥ <em>89.00</em></p>
                            </li>
                            <li>
                                <img src="../img/45_05923385552023978_240.jpg" alt="">
                                <p>2018早秋卫衣韩版潮流修身圆领套头衫青少年学生百搭春秋男士外套 黑色 M</p>
                                <p>￥ <em>89.00</em></p>
                            </li>
                        </ul>
                    </div>
                </div>
                <!-- 点击查看商品详情 -->
                <div class="examine">
                    <a href="###">点击查看商品详情</a>
                </div>
                <!-- 隐藏的购物车 -->
                <section class="gouwuche-mask">
                    <div class="gouwuche">
                        <p class="gouwuche-p"><span class="icon iconfont">&#xe679</span>点击此处返回</p>
                        <p class="guanbi">X</p>
                        <div class="gouwuche-top">
                            <div class="content">
                                <img class="fl" src="../img/45_06266619174795164_360.jpg" alt="">
                                <div class="biaoti fr">
                                    <p>男士破洞春秋牛仔夹克男潮2019新款春装上衣韩版潮流褂子春季外套 浅蓝色 XL</p>
                                    <p>
                                        <span class="fl">￥128.00</span>
                                        <span class="fr">库存了：9999件</span>
                                    </p>
                                </div>
                            </div>
                        </div>
                        <div class="gouwuche-yanse">
                            <div class="content">
                                <div class="gouwuche-yanse1">
                                    <p>颜色：</p>
                                    <p>
                                        <span>黑色</span>
                                        <span class="active">浅蓝色</span>
                                    </p>
                                </div>
                                <div class="gouwuche-yanse1">
                                    <p>尺码：</p>
                                    <p>
                                        <span>M</span>
                                        <span>L</span>
                                        <span class="active">XL</span>
                                        <span>2XL</span>
                                        <span>3XL</span>
                                    </p>
                                </div>
                            </div>
                        </div>
                        <div class="gouwuche-bottom">
                            <div class="content">
                                <p class="fl">购买数量</p>
                                <p class="fr">
                                    <input type="button" value="-">
                                    <span>1</span>
                                    <input type="button" value="+">
                                </p>
                            </div>
                        </div>
                    </div>
                </section>
            </section>
        </main>

        <footer>
            <ul>
                <li class="fl"><span class="icon iconfont">&#xe665;</span>客服</li>
                <li class="fl"><span class="icon iconfont">&#xe657;</span>购物车</li>
                <li class="fl" id="buynow">立即购买</li>
                <li class="fl" id="addcart">加入购物车</li>
            </ul>
        </footer>
    </section>
</body>
<script src="../js/jquery-3.4.1.min.js"></script>
<script src="../js/about.js"></script>

</html>